<template>
  <el-form :inline="true" :model="search" class="demo-form-inline">
    <el-form-item label="投资人">
      <el-input v-model="station.userName" />
    </el-form-item>
    <el-form-item label="站点名称">
      <el-input v-model="station.stationName" />
    </el-form-item>
    <el-form-item label="状态">
      <el-input v-model="station.status" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getStaffList">查询</el-button>
    </el-form-item>
  </el-form>

  <div class="add-div">
    <el-button type="primary" plain @click="add">新增</el-button>
  </div>

  <el-table :data="stationList" style="width: 80%">
    <el-table-column prop="userId" label="用户ID" width="150" />
    <el-table-column prop="title" label="充电类型" width="150" />
    <el-table-column prop="content" label="内容" width="150" />
    <el-table-column prop="createTime" label="创建时间" width="120" />
    <el-table-column fixed="right" label="操作" width="180">
      <template #default="{ row }">
        <el-button link type="primary" size="small" @click="Edit(row)">修改</el-button>
        <el-button link type="primary" size="small" @click="Detail(row)">详情</el-button>
        <el-button link type="primary" size="small" @click="Delete(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog width="30%" v-model="dialogDetailVisible">
    <el-form ref="formRef" label-width="100px">
      <el-form-item label="投资人">
        <el-input v-model="station.userName"></el-input>
      </el-form-item>
      <el-form-item label="站点名称">
        <el-input v-model="station.stationName"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="station.address"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-input v-model="station.status"></el-input>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-input v-model="station.createTime"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmitDetail">提交</el-button>
        <el-button type="primary" @click="DetailClose">关闭</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { znxList } from "@/api/staff";
import { useRouter } from 'vue-router';

const station = ref({
  userName: '',
  stationName: '',
  address: '',
  status: '',
  createTime: ''
});

const stationList = ref([]);
const dialogDetailVisible = ref(false);

// 获取站点列表
function getStaffList() {
  znxList()
      .then(res => {
        if (res.data.code === 200000) {
          console.log('响应数据:', res.data.data);
          stationList.value = res.data.data;
        } else {
          ElMessage({
            message: res.data.msg,
            type: 'warning'
          });
        }
      })
      .catch(error => {
        console.error('获取站点列表失败:', error);
        ElMessage({
          message: '获取站点列表失败',
          type: 'error'
        });
      });
}

onMounted(() => {
  getStaffList();
});

// 详情
function Detail(data) {
  station.value = {
    userName: data.userId,
    stationName: data.title,
    address: data.content,
    status: data.isRead,
    createTime: data.createTime
  };
  dialogDetailVisible.value = true;
}

// 关闭详情
function DetailClose() {
  dialogDetailVisible.value = false;
}

// 编辑
function Edit(data) {
  station.value = {
    userName: data.userId,
    stationName: data.title,
    address: data.content,
    status: data.isRead,
    createTime: data.createTime
  };
  dialogDetailVisible.value = true;
}

// 删除
function Delete(data) {
  ElMessageBox.confirm(
      '是否确认删除',
      '提醒',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(() => {
    console.info("delete station");
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '删除取消'
    });
  });
}

// 提交详情表单
function onSubmitDetail() {
  console.log('提交表单：', station.value);
}
</script>

<style scoped>
.add-div {
  margin-top: 20px;
  text-align: right;
}
</style>
